<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.b2{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
		</style>
		
	</head>
	<body>
		<button type="button" id="btn1">点击之后可以修改box的样式</button>
		<br><br>
		<div id="box1" class="b1"></div>
		<script type="text/javascript">
			var btn01 = document.getElementById("btn1");
			var box = document.getElementById("box1");
			//修改box的class属性
			//我们可以通过修改元素的class属性来简介修改样式
			//这样一来我们只需修改一次，即可以同时修改多个样式
			//浏览器只需要渲染一次界面，性能比较好
			//而且这种方式，可以使表现和行为进一步分离
			//box.className += " b2";
			btn01.onclick = function(){
				box.className ="b2";
			}
			//定义一个函数，来向一个元素添加指定的class属性值
			function addClass(obj,cn){
				if(hasClass(obj,cn)){
					obj.className += ""+cn
				}
			}
			//判断一个元素中是否含有指定的class属性值
			function hasClass(obj,cn){
				var reg = new RegExp("\\b"+cn+"\\b");
				return reg.test(obj.className);
			}
			//删除一个元素中指定的className
			function removeClass(obj,cn){
				var reg = new RegExp("\\b"+cn+"\\b");
				obj.className = obj.className.replace(reg,"");
			}
			//切换一个类
			//如果元素中具有该类，则删除
			//如果没有则添加
			function toggleClass(obj,cn){
				if(hasClass(obj.cn)){
					removeClass(obj.cn);
				}else{
					addClass(obj,cn);
				}
			}
		</script>
	</body>
</html>
